<div class="table-section">
  <h3>两层表头</h3>
  <lv-datatable
    [lvData]="data"
    #lvTable
    lvMultiGroup
    lvSelectionMode="multiple"
    [lvSelection]="selection"
    (lvSelectionChange)="selectionChange($event)"
  >
    <colgroup>
      <col />
      <col style="width: 80px" />
      <col style="width: 10%" />
      <col />
      <col />
    </colgroup>
    <thead>
      <tr>
        <th
          rowspan="2"
          lvShowCheckbox
          width="40px"
          [lvRowsData]="lvTable.renderData"
          (lvCheckChange)="checkAllChange($event)"
        ></th>
        <th colspan="3">Basic Info</th>
        <th>Other Info</th>
      </tr>
      <tr>
        <th style="padding-left: 8px">Id</th>
        <th style="padding-left: 8px"><div lvOverflow>This is long long long long Name</div></th>
        <th>Age</th>
        <th>Number</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of lvTable.renderData">
        <tr>
          <td
            lvShowCheckbox
            [lvRowData]="item"
            [lvDisabled]="item.disabled"
            (lvCheckChange)="checkOneChange($event)"
          ></td>
          <td>{{ item.id }}</td>
          <td
            ><div lvOverflow>{{ item.name }}</div></td
          >
          <td>{{ item.age }}</td>
          <td>{{ item.number }}</td>
        </tr>
      </ng-container>
    </tbody>
  </lv-datatable>

  <h3>两层以上表头</h3>
  <lv-datatable
    [lvData]="data"
    #lvTable
    lvBordered
    lvMultiGroup
    lvSelectionMode="multiple"
    [lvSelection]="selection"
    (lvSelectionChange)="selectionChange($event)"
  >
    <!-- 需要自定义列宽时才使用 -->
    <colgroup>
      <col />
      <col style="width: 80px" />
      <col style="width: 10%" />
      <col />
      <col />
    </colgroup>
    <thead>
      <tr>
        <th
          rowspan="3"
          lvShowCheckbox
          width="40px"
          [lvRowsData]="lvTable.renderData"
          (lvCheckChange)="checkAllChange($event)"
        ></th>
        <th colspan="3">Basic Info</th>
        <th>Other Info</th>
      </tr>
      <tr>
        <th rowspan="2" style="padding-left: 8px">Id</th>
        <th colspan="2">Personal Info</th>
        <th rowspan="2">Number</th>
      </tr>
      <tr>
        <th style="padding-left: 8px"><div lvOverflow>This is long long long long Name</div></th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of lvTable.renderData">
        <tr>
          <td
            lvShowCheckbox
            [lvRowData]="item"
            [lvDisabled]="item.disabled"
            (lvCheckChange)="checkOneChange($event)"
          ></td>
          <td>{{ item.id }}</td>
          <td
            ><div lvOverflow>{{ item.name }}</div></td
          >
          <td>{{ item.age }}</td>
          <td>{{ item.number }}</td>
        </tr>
      </ng-container>
    </tbody>
  </lv-datatable>

  <div class="aui-help-tips">多行表头当前不支持拖拽，自定义列宽不可和lvResize属性一起使用</div>
</div>
